import React, { Fragment, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
TextArea.propTypes = {
    label: PropTypes.string,
    placeholder: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string,
};
export default function TextArea(props) {
    const [value, setValue] = useState('');
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    return (
        <Fragment>

            {props.label && <div className="weui-cell">{props.label}</div>}
            <div className=" weui-cells_form">
                <div className="weui-cell">
                    <div className="weui-cell__bd">
                        <textarea
                            className="weui-textarea"
                            placeholder={props.placeholder}
                            rows="3"
                            onChange={(e) => props.onChange(e)}
                            defaultValue={value}
                        ></textarea>
                    </div>
                </div>
            </div>
        </Fragment>

    )
}
